<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加菜单</title>
    <link rel="stylesheet" href="../../../../start/layui/css/layui.css" media="all">
</head>
<body>
<div class="layui-fluid" style="padding: 15px">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">
                    添加角色数据
                </div>
                <div class="layui-card-body">
                    <form class="layui-form" action="#"  lay-filter="example">
                        <input type="hidden" name="menuId" id="menuId" >
                        <div class="layui-form-item">
                            <label class="layui-form-label">菜单名称：</label>
                            <div class="layui-input-inline">
                                <input type="text" name="menuname" id="menuname" required lay-verify="required" placeholder="请输入名称" autocomplete="off" class="layui-input">
                            </div>
                            <div class="layui-form-mid layui-word-aux">建议：见名知意</div>
                        </div>
                        <div class="layui-form-item layui-form-text">
                            <label class="layui-form-label">菜单描述：</label>
                            <div class="layui-input-block">
                                <textarea name="menudescribe" id="menudescribe" placeholder="请输入内容" class="layui-textarea"></textarea>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">菜单地址：</label>
                            <div class="layui-input-inline">
                                <input type="text" name="menuurl" id="menuurl" required lay-verify="required" placeholder="请输入地址" autocomplete="off" class="layui-input">
                            </div>
                            <div class="layui-form-mid layui-word-aux">无效地址将会导致界面报错</div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">是否有效：</label>
                            <div class="layui-input-inline">
                                <!--<input type="text" name="valid" required lay-verify="required" placeholder="1为有效值0为无效值" autocomplete="off" class="layui-input">-->
                                <input type="checkbox" id="switchButton" lay-skin="switch" lay-filter="switchTest" lay-text="有用|无用">
                                <input type="hidden" id="valid" name="valid" value="0">
                            </div>
                            <!--<div class="layui-form-mid layui-word-aux">是否为展示的标签</div>-->
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">展示等级：</label>
                            <div class="layui-input-inline">
                                <input type="text" name="grade" id="grade" required lay-verify="required" placeholder="按照提示填写"  autocomplete="off" class="layui-input">
                            </div>
                            <div id="grades" class="layui-form-mid layui-word-aux"><span id="gradeSpan" name="0" style="color: #999999">值要大于0</span></div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">上级菜单：</label>
                            <div class="layui-input-block">
                                <input type="hidden" id="menuMenuidSelect">
                                <select name="menuMenuid" lay-filter="aihao" id="menuMenuid" >
                                    <option label="1" value="0" >无上级菜单</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-btn-container">
                            <input type="hidden" id="buttonSwitch" value="add">
                             <button type="button"  class="layui-btn layui-btn-sm" lay-submit lay-filter="addMune">提交数据</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>
<script src="../../../../start/layui/layui.js"></script>
<script>
    layui.use(['table', 'form', 'jquery', 'layer', 'tree','util'], function () {
        var tree = layui.tree
            ,$ = layui.jquery
            ,table = layui.table
            ,util = layui.util
            ,form = layui.form
            ,layer = layui.layer;


        $.ajax({
            url:"../../../../PreviousMenu",
            success:function(data){
                for(var i =0;i<data.length;i++){
                    $("#menuMenuid").append("<option value='"+data[i].menuId+"' label='"+data[i].grade+"'>"+data[i].menuname+"</option>");
                    //重新渲染
                    form.render("select");
                }
            }
        });

        setTimeout(function(){//设置定时器
            //值为1开启按钮
            if ($("#valid").val()==1){
                $("#switchButton").prop("checked",true);
                form.render("checkbox");
            }

            $("#menuMenuid option[value='"+$("#menuMenuidSelect").val()+"']").attr("selected","selected");

            form.render("select");

        },600);

        //下拉框选中事件
        form.on("select(aihao)", function(){
            $("#gradeSpan").text('值要大于'+$("#menuMenuid option:checked").attr("label"));
            $("#gradeSpan").attr("name",$("#menuMenuid option:checked").attr("label"));

        });
        $("#grade").blur(function(){
            if ($("#grade").val()<$("#gradeSpan").attr("name")){
                $("#gradeSpan").css("color","#CF1900");
            }else {
                $("#gradeSpan").css("color","#999999");
            }
        })
        //监听指定开关
        form.on('switch(switchTest)', function(data){
            var pan=this.checked ? 'true' : 'false';
            if (pan=="true"){
                $("#valid").val(1)
            }else {
                $("#valid").val(0)
            }
        });
        //提交数据
        form.on('submit(addMune)', function(data){
            var str="添加成功";
            var url="AddMenutble";
            if ($("#buttonSwitch").val()=="update"){
                str="修改成功";
                var url="UpdateMenu";
            }
            //console.log(data.field) 当前容器的全部表单字段，名值对形式：{name: value}
            //表单提交
            $.ajax({
                type: "POST",
                url:  '../../../../'+url,
                dataType: "text",
                data:data.field,
                success: function(data){
                }
            });
            layer.msg(str+',即将关闭...');
            setTimeout(function(){//设置定时器
                window.parent.location.reload();//刷新父页面
                //获取当前窗口名称
                //当你在iframe页面关闭自身时
                var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                parent.layer.close(index); //再执行关闭
            },1000);

            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });


    })


</script>